<script>
import { getUserByIdAjax, saveOrUpdate } from '@/data/UserinfoData'
import { getRoleListAjax } from '@/data/RoleData'

export default {
  name: 'UserinfoDetail',
  data () {
    return {
      show: false,
      userinfo: { },
      rules: {
        nickname: [
          { required: true, message: '昵称不能为空' }
        ]
      },
      roleList: []
    }
  },
  methods: {
    getUserInfo () {
      this.show = true
      this.getRoleList()
      const loginInfo = JSON.parse(sessionStorage.getItem('loginInfo'))
      const res = getUserByIdAjax(loginInfo.id)
      if (res.code === 200) {
        this.userinfo = { ...res.data }
      } else {
        this.$alert(res.msg, { type: 'error' })
      }
    },
    submit () {
      this.$refs.formData.validate(valid => {
        if (valid) {
          const res = saveOrUpdate(this.userinfo)
          if (res.code === 200) {
            this.$message.success('更新成功')
            const res2 = getUserByIdAjax(this.userinfo.id)
            if (res2.code === 200) {
              sessionStorage.setItem('loginInfo', JSON.stringify(res2.data))
              this.$emit('close')
            }
            this.show = false
          } else {
            this.$alert(res.msg, { type: 'error' })
          }
        }
      })
    },
    getRoleList () {
      const res = getRoleListAjax()
      if (res.code === 200) {
        this.roleList = [...res.data]
      }
    }
  }
}
</script>

<template>
<el-dialog v-if="show" :visible.sync="show" title="个人信息页">
<el-form ref="formData" :model="userinfo" :rules="rules" label-width="80px">
  <el-form-item label="用户名" prop="username">
    <el-input disabled v-model="userinfo.username" placeholder="请输入用户名"/>
  </el-form-item>
  <el-form-item label="昵称" prop="nickname">
    <el-input v-model="userinfo.nickname" placeholder="请输入昵称"/>
  </el-form-item>
  <el-form-item label="角色" prop="roleId">
    <el-select disabled v-model="userinfo.roleId" clearable filterable>
      <el-option v-for="role in roleList" :key="role.id" :value="role.id" :label="role.name" :disabled="role.status === 2" />
    </el-select>
  </el-form-item>
  <el-form-item label="状态" prop="status">
    <el-radio-group disabled v-model="userinfo.status">
      <el-radio :label="1">可用</el-radio>
      <el-radio :label="2">禁用</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submit">提交</el-button>
  </el-form-item>
</el-form>
</el-dialog>
</template>

<style scoped>

</style>
